<template>
  <div class="register-box">
    <!-- <van-nav-bar
      title="重置密码"
      left-arrow
      @click-left="onClickLeft"
    /> -->

    <van-cell-group
      class="register-container"
      :border="false"
      >
      <van-field
        v-model="form.phoneNum"
        icon="clear"
        placeholder="请输入您的手机号"
        @click-icon="username = ''"
        >
        <template slot="label">
          <p class="c-text-right">手机号</p>
        </template>
      </van-field>

      <van-field
        v-model="sms"
        placeholder="获取短信验证码"
        @click-icon="sms = ''"
      >
        <template slot="label">
          <p class="c-text-right">验证码</p>
        </template>
        <van-button
          slot="button"
          size="small"
          class="btn-sms"
          :disabled="isSmsBtnDisable"
          @click="sendCode"
          style="width: 68px;"
        >
          {{ countdown }}
        </van-button>
      </van-field>

      <van-field
        v-model="form.password"
        type="password"
        placeholder="请输入您的密码"
        >
        <template slot="label">
          <p class="c-text-right">新密码</p>
        </template>
      </van-field>

      <van-field
        v-model="rePassword"
        type="password"
        placeholder="请确认您的密码"
        >
        <template slot="label">
          <p class="c-text-right">请确认</p>
        </template>
      </van-field>
    </van-cell-group>

    <van-row class="submit-container">
      <van-col offset="2" span="20">
        <van-button
          class="submit-btn"
          type="primary"
          @click="isSubmitClick ? onClickSubmit() : ''"
          >
          提交
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  import { NavBar, Cell, CellGroup, Field, Button, Row, Col, Dialog } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Dialog.name]: Dialog,
    },
    data() {
      return {
        isSubmitClick: true,
        rePassword: '',
        countSecond: 60,
        countdown: '获取',
        isSmsBtnDisable: false,
        sms: '',
        form: {
          phoneNum: '',
          password: '',
          verifyCode: '',
          verifyType: 'RESET_PASSWORD'
        },
      }
    },
    mounted() {

    },
    methods: {
      onClickLeft() {
        // 点击返回
        this.$router.go(-1);
      },
      sendCode() {
        // 手机号格式校验
        let reg=/^(1{1}\d{10})$/;
        if(!reg.test(this.form.phoneNum)) {
          this.$dialog.alert({
            message: '手机号格式不正确，请重新输入！'
          });
          return false;
        }

        // 发送验证码
        this.countdown = this.countSecond + 's';
        this.isSmsBtnDisable = true;
        let timer = setInterval(() => {
          if(this.countSecond <= 0) {
            this.countSecond = 60;
            this.countdown = '发送验证码';
            this.isSmsBtnDisable = false;
            clearInterval(timer);
            return false;
          }
          this.countSecond --;
          this.countdown = this.countSecond + 's';
        },1000);

        // 发送验证码
        let params = new URLSearchParams();
        params.append('phoneNum', this.form.phoneNum);
        this.$axios({
          method: "POST",
          url: url_g + '/userLogin/getResetPasswordCode',
          data: params,
        }).then((res) => {
          let data = res.data;
          console.log(res);
          if(data.success) {
            // 成功
            this.form.verifyCode = data.data;
          } else {
            // 手机号已注册
            this.$dialog.alert({
              message: data.message
            });
          }
        }).catch((e)=>{
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
      onClickSubmit() {
        this.isSubmitClick = false;

        if(this.form.password != this.rePassword) {
          this.$dialog.alert({
            message: '两次密码输入不一致'
          });
          this.isSubmitClick = true;
          return false;
        }

        for(let key in this.form) {
          if(this.form[key] === '') {
            this.$dialog.alert({
              message: '请完成输入'
            });
            this.isSubmitClick = true;
            return false;
          }
        }

        // 提交
        let params = new URLSearchParams();
        params.append('phoneNum', this.form.phoneNum);
        params.append('password', this.form.password);
        params.append('verifyCode', this.form.verifyCode);
        params.append('verifyType', this.form.verifyType);
        this.$axios({
          method: "POST",
          url: url_g + '/userLogin/validateVerifyCode',
          data: params,
        }).then((res) => {
          if(res.data) {
            Dialog.confirm({
              message: '修改成功'
            }).then(() => {
              // on confirm
              // 修改密码成功 返回前一页面
              this.$router.go(-1);
            }).catch(() => {
              // on cancel
            });
          } else {
            this.$dialog.alert({
              message: '修改失败'
            });
          }
          // this.$router.push('/home');
        }).catch((e)=>{
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      }
    }
  }
</script>

<style scoped="scoped">
.c-text-right {
  padding-right: 15px;
}
.register-box {
  width: 100%;
  height: calc(100% - 5px);
  background-color: #EEEEEE;
  padding-top: 5px;
}
.submit-container {
  width: 100%;
  position: absolute;
  bottom: 50px;
}
.submit-btn {
  margin-top: 60px;
  width: 100%;
}
.btn-sms {
  border: 1px solid #00BE0C;
  color: #00BE0C;
  background-color: #fff;
}
</style>